import React from 'react';
import {Modal, Button, DatePicker} from 'antd';
import moment from "moment";
import locale from 'antd/lib/date-picker/locale/zh_CN';
import 'moment/locale/zh-cn';
// import {FormattedMessage} from "../../utils/locale";

moment.locale('zh-cn');

const {RangePicker} = DatePicker;

class DatePickerWrap extends React.Component {

  handlerModalCancel = _ => {
    this.props.onSetVisible(false);
  };
  renderExtraFooter = () => (
    <div>
      <Button size="small" type="primary" onClick={this.handlerModalCancel}>取消</Button>
    </div>
  );
  render() {
    const {visible, onOk,} = this.props;
    const defaultValue = this.props.getDefaultDate();
    return (
      // todo fix
      <div>
        <Modal
          visible={visible}
          style={{visibility: 'hidden'}}
          // onOk={this.handleBtnClick(false)}
          onCancel={this.handlerModalCancel}
        >
          <RangePicker
            locale={locale}
            showTime={{format: 'HH:mm'}}
            format="YYYY-MM-DD HH:mm"
            placeholder={['Start Time', 'End Time']}
            // onChange={this.onChange}
            defaultValue={defaultValue}
            defaultPickerValue={defaultValue}
            onOk={onOk}
            open={visible}
            renderExtraFooter={() => this.renderExtraFooter()}
          />
        </Modal>
      </div>
    );
  }
}

export default DatePickerWrap;
